/*body加边框，边距采用自适应*/
body{
    margin:auto;
    border:4px solid DeepPink;
}

/*大标题样式居中就好*/
#title{
    text-align:center;
}

/*将所有div的共同样式提取出来*/
div{
    border: thin solid #CCCCCC;
    margin-left:5%;
    margin-bottom: 1%;
    margin-right:5%;
}

/*圆角并不是每个div都需要的样式，所以单独写出来*/
.yj{
    border-radius:5px;
}

/*信息部分的样式可以公用，所以提取出来*/
.info{
    display:inline-block;
    margin-left:1%;
    line-height:50px;
    width:30%;
    font-weight: bold;
}

/*大题题干的div需要个性化，它的圆角只有上方的两个*/
#testTitle{
    line-height:25px;
    background-color: #E8E8E8;
    margin-bottom: 0px;
    border-top-right-radius:5px;
    border-top-left-radius:5px;
}

/*大题的题目需要调整左边距*/
#testTitle h3{
    margin-left:1%;
}

/*小题部分的边框需要有下边的两个圆角*/
#testContent{
    border:thin solid #CCCCCC;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
}

/*小题的题干的字体需要加粗，同时其边距需要调整*/
#testContent li{
    margin-left:1%;
    margin-bottom: 1%;
    margin-top: 1%;
    font-weight: bold;
}

/*选项的边距需要调整*/
#item{
    margin-left:1%;
    border:0px;
    margin-bottom: 0px;
}

/*文本域的大小、边距需要调整，同时需要加上圆角*/
#answerArea{
    height:25%;
    width:95%;
    margin-bottom:2%;
    border-radius:5px;
    border:thin solid #CCCCCC;
}

/*判断题选项的对错样式设置*/
.yes{
    color:Green;
    font-weight:bold;
}
.no{
    color:Red;
    font-weight:bold;
}

/*调整位置*/
label{
    line-height:30px;
}

/*按钮位置、大小、背景色、圆角设置*/
#button{
    width:6%;
    height:5%;
    background-color: #31b0d5;
    border:thin solid #286090;
    border-radius:5px;
    color:#fff;
    margin-left:44%;
}

/*输入框的大小位置调整，同时加上圆角*/
input[type=text]{
    width:150px;
    height:4%;
    border-radius:5px;
    border:thin solid #CCCCCC;
}

